<template>
  <view>
    <!--提示-->
    <!-- <view class="bg-grey text-sm text-center padding-tb-xs text-white">真机实拍部分为真机样张，您购买的机型大致符合图中成色效果</view> -->
    <u-navbar
      :is-fixed="true"
      :border-bottom="false"
      :is-back="true"
      back-icon-name="arrow-leftward"
      title="商品详情"
      back-icon-size="35"
      :background="{ background: '#fff' }"
      title-color="#000"
    >
    </u-navbar>

    <!--轮播图-->
    <view class="aiui-banner-swiper-box">
      <swiper class="creen-swiper" circular autoplay @change="bannerSwiper">
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <image :src="item.url" mode="aspectFill" />
        </swiper-item>
      </swiper>
      <!--页码-->
      <!-- <text class="cu-tag bg-grey round sm zaiui-page"
        >{{ bannerCur + 1 }} / {{ bannerList.length }}</text
      > -->
    </view>

    <!--标题-->
    <view class="bg-white zaiui-view-box zaiui-title-view-box">
      <view class="title-view">
        <text class="cu-tag bg-red radius sm">逸飞专营</text>
        <text class="text-black text-lg text-bold">{{ data.title }}</text>
      </view>
      <view class="light bg-red radius margin-top-sm zaiui-title-tip-box">
        <view class="">
          <text class="text-sm">{{ data.article }}</text>
        </view>
      </view>
    </view>

    <!--服务-->
    <!-- @tap="serviceTap" -->
    <view class="margin-top bg-white zaiui-view-box zaiui-service-view-box">
      <view class="flex flex-wrap text-sm">
        <view class="basis-1">
          <text class="text-gray">服务</text>
        </view>
        <view class="basis-7">
          <view>
            <text class="tag-view">
              <text class="cuIcon-title text-red" />
              <text>缴纳押金租赁免费使用3小时</text>
            </text>

            <text class="tag-view">
              <text class="cuIcon-title text-red" />
              <text>直接购买</text>
            </text>
          </view>
          <view class="margin-top-xs">
            <text class="tag-view">
              <text class="cuIcon-title text-red" />
              <text>现场核销</text>
            </text>
          </view>
        </view>
      </view>
    </view>

    <!--促销-->
    <view class="margin-top bg-white zaiui-view-box zaiui-promotion-view-box">
      <view class="flex flex-wrap text-sm">
        <view class="basis-1">
          <text class="text-gray">规则</text>
        </view>
        <view class="basis-7">
          <view class="flex flex-c">
            <text class="cu-tag line-orange sm radius">租赁</text>
            <text class="text-view">现场核销后请在免费时段内归还物资</text>
          </view>
          <view class="margin-top-xs flex flex-c">
            <text class="cu-tag line-orange sm radius">押金</text>
            <text class="text-view">无折损或丢失，押金100%退回</text>
          </view>
        </view>
      </view>
    </view>

    <!--选择-->
    <view class="margin-top bg-white zaiui-view-box zaiui-select-view-box">
      <view class="flex flex-wrap text-sm">
        <view class="basis-1">
          <text class="text-gray">说明</text>
        </view>
        <view class="basis-9">
          <text class="text-sm" style="line-height: 1.7"
            >门店18点下班，请在免费时段内归还，超出时长按照5元/小时扣除押金</text
          >
        </view>
      </view>

      <view class="zaiui-border-view" />
    </view>

    <!--评论-->
    <!-- <view class="margin-top bg-white zaiui-comment-view-box">
      <view class="cu-bar bg-white">
        <view class="action">
          <text class="text-black text-lg">评价（3699）</text>
        </view>
        <view class="action">
          <view class="text-sm">
            <text class="margin-right-xs">好评率</text>
            <text class="text-black text-lg">97%</text>
            <text class="cuIcon-right icon margin-left-xs" />
          </view>
        </view>
      </view>
      <view class="zaiui-border-view" />
      <view class="zaiui-view-box">
        <view class="flex flex-wrap text-sm">
          <view class="basis-1">
            <view
              class="cu-avatar sm round"
              style="background-image: url(/static/images/avatar/1.jpg)"
            />
          </view>
          <view class="basis-9 text-sm">
            <view>仔仔</view>
            <view class="margin-top-xs"
              >X真的是我觉得性价比最高的机器了，大小合适，全面屏操作流畅，灰色也很漂亮，超喜欢</view
            >
            <view class="text-gray margin-top-sm">iPhone X 64G深空灰色</view>
          </view>
        </view>
      </view>
      <view class="zaiui-border-view" />
      <view class="zaiui-view-box">
        <view class="flex flex-wrap text-sm">
          <view class="basis-1">
            <view
              class="cu-avatar sm round"
              style="background-image: url(/static/images/avatar/2.jpg)"
            />
          </view>
          <view class="basis-9 text-sm">
            <view>仔仔</view>
            <view class="margin-top-xs"
              >X真的是我觉得性价比最高的机器了，大小合适，全面屏操作流畅，灰色也很漂亮，超喜欢</view
            >
            <view class="text-gray margin-top-sm">iPhone X 64G深空灰色</view>
          </view>
        </view>
      </view>
    </view> -->

    <!--图片详情-->
    <view class="margin-top zaiui-goods-details-box" v-if="false">
      <image src="/static/images/home/goods/goods-1.png" mode="widthFix" />
      <image src="/static/images/home/goods/goods-2.png" mode="widthFix" />
    </view>

    <!--常见问题-->
    <view
      class="margin-top bg-white margin-bottom zaiui-view-box zaiui-goods-help-view-box"
    >
      <view class="text-black text-lg margin-bottom-sm">常见问题</view>
      <view class="flex flex-wrap margin-bottom">
        <view class="basis-1">
          <text class="cu-tag bg-grey radius sm">问</text>
        </view>
        <view class="basis-9">
          <view class="margin-bottom-xs text-black"
            >不慎损坏或丢失套装的东西，押金还可以退吗</view
          >
          <view class="text-sm"
            >手机袋，防水袋破损不能防水、水枪不能正常使用、水瓢破损属于损坏。若发生损坏或者遗失情况平台将扣除部分押金，用户可选择直接买断套装或者申请退回剩余押金</view
          >
        </view>
      </view>
      <view class="flex flex-wrap margin-bottom">
        <view class="basis-1">
          <text class="cu-tag bg-grey radius sm">问</text>
        </view>
        <view class="basis-9">
          <view class="margin-bottom-xs text-black">如何申请退回押金</view>
          <view class="text-sm"
            >交还套装，工作人员核实套装使用情况无误后，平台将所缴纳押金原路返回用户</view
          >
        </view>
      </view>
      <view class="zaiui-border-view" />
      <!-- <view class="text-center text-blue">查看更多问题</view> -->
    </view>

    <!--占位底部距离-->
    <view class="cu-tabbar-height" />

    <!--底部操作-->
    <view class="zaiui-footer-fixed">
      <view class="cu-bar bg-white tabbar border shop">
        <view class="action" @click="$u.func.route('/pages/order/list')">
          <view class="cuIcon-cart"> </view>
          <text>订单</text>
        </view>
        <view class="btn-group">
          <!-- @tap="selectTap('add')" -->
          <button
            class="cu-btn bg-orange radius shadow-blur"
            style="width: 100%"
            @click="WxPay(1)"
          >
            直接购买
          </button>
          <view style="width: 20px"></view>
          <!-- @tap="selectTap('sell')" -->
          <button
            class="cu-btn bg-red radius shadow-blur"
            style="width: 100%"
            @click="WxPay(2)"
          >
            缴纳押金
          </button>
        </view>
      </view>
    </view>

    <!--弹出框-->
    <view
      class="cu-modal bottom-modal zaiui-bottom-modal-box"
      :class="bottomModal ? 'show' : ''"
    >
      <view class="cu-dialog bg-white">
        <!--标题-->
        <view class="text-black text-center margin-tb text-lg zaiui-title-bar">
          <text>{{ modalTitle }}</text>
          <text class="cuIcon-close close-icon" @tap="hideModal"></text>
        </view>

        <!--内容区域-->
        <view class="zaiui-modal-content">
          <!--服务区域-->
          <view class="zaiui-view-box service" v-if="modalType == 'service'">
            <view class="text-view">
              <text class="cuIcon-title text-red" />
              <text class="text-cut text-black">已验机</text>
            </view>
            <view class="text-sm text-list-view">
              <view class="margin-left text-cut text-gray"
                >转转&富士康联合制定验机标准，对设备进行专业质检</view
              >
            </view>
            <view class="text-view">
              <text class="cuIcon-title text-red" />
              <text class="text-cut text-black">7天无理由</text>
            </view>
            <view class="text-sm text-list-view">
              <view class="margin-left text-cut text-gray"
                >自收到商品7天内，不喜欢可以申请退货，并自付邮费寄回</view
              >
            </view>
            <view class="text-view">
              <text class="cuIcon-title text-red" />
              <text class="text-cut text-black">180天质保</text>
            </view>
            <view class="text-sm text-list-view">
              <view class="margin-left text-cut text-gray"
                >自订单确认收货起180天,提供免费质保</view
              >
            </view>
            <view class="text-view">
              <text class="cuIcon-title text-red" />
              <text class="text-cut text-black">顺丰包邮</text>
            </view>
            <view class="text-sm text-list-view">
              <view class="margin-left text-cut text-gray"
                >16:00前下单，今日发货，顺丰包邮(偏远地区邮政包邮)</view
              >
            </view>
            <view class="text-view">
              <text class="cuIcon-title text-red" />
              <text class="text-cut text-black">半年电池免费换新</text>
            </view>
            <view class="text-sm text-list-view">
              <view class="margin-left text-cut text-gray"
                >自订单确认收货起半年，如果电池电量低于60%，可申请免费更换原厂品质电池</view
              >
            </view>
          </view>

          <!--促销区域-->
          <view
            class="zaiui-view-box promotion"
            v-if="modalType == 'promotion'"
          >
            <view class="text-view">
              <text class="cu-tag line-orange radius sm">赠品</text>
              <text class="margin-left-xs text-cut text-black"
                >品胜充电器套装</text
              >
            </view>

            <view class="text-sm text-list-view">
              <view class="text-cut">充电头+数据线</view>
              <text class="text-right-view">价值￥99</text>
            </view>

            <view class="text-view">
              <text class="cu-tag line-orange radius sm">分期</text>
              <text class="margin-left-xs text-cut text-black"
                >￥318元/月花呗/京东/微信组合支付</text
              >
            </view>
          </view>

          <!--选择规格-->
          <view class="zaiui-view-box select" v-if="modalType == 'select'">
            <!--商品信息-->
            <view class="cu-list menu-avatar">
              <view class="cu-item">
                <view
                  class="cu-avatar radius lg"
                  style="background-image: url(/static/images/home/goods/1.png)"
                />
                <view class="content">
                  <view class="text-price-view">
                    <text class="text-price text-red margin-right-xs"
                      >2699</text
                    >
                    <text class="text-sm text-gray text-through">￥6999</text>
                    <text class="cu-tag bg-gradual-red radius sm">
                      <text class="cuIcon-hotfill" />
                      <text>秒杀中</text>
                    </text>
                  </view>
                  <view class="text-black text-sm flex">
                    <view class="text-cut"
                      >已选: 99新深空灰色64G国行三网通</view
                    >
                  </view>
                </view>
              </view>
            </view>

            <!--规格数据-->
            <view class="zaiui-select-btn-list-boox">
              <view class="select-item">
                <view class="text-black">成色</view>
                <view class="select-btn">
                  <button class="cu-btn">95新</button>
                  <button class="cu-btn">9成新</button>
                  <button class="cu-btn light bg-red">99新</button>
                </view>
              </view>

              <view class="select-item">
                <view class="text-black">颜色</view>
                <view class="select-btn">
                  <button class="cu-btn light bg-red">深空灰色</button>
                  <button class="cu-btn" disabled>银色</button>
                </view>
              </view>

              <view class="select-item">
                <view class="text-black">容量</view>
                <view class="select-btn">
                  <button class="cu-btn" disabled>256G</button>
                  <button class="cu-btn light bg-red">64G</button>
                </view>
              </view>

              <view class="select-item">
                <view class="text-black">版本</view>
                <view class="select-btn">
                  <button class="cu-btn">港澳版移动4G/联通4G</button>
                  <button class="cu-btn">其他版本移动4G/联通4G</button>
                  <button class="cu-btn">其他版本三网通</button>
                  <button class="cu-btn light bg-red">国行三网通</button>
                </view>
              </view>
            </view>
          </view>

          <!--公共按钮-->
          <view class="zaiui-footer-fixed">
            <view class="flex flex-direction">
              <button class="cu-btn bg-red lg">确定</button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import _goods_data from "@/static/zaiui/data/goods.js"; //虚拟数据
import _tool from "@/static/zaiui/util/tools.js"; //工具函数
export default {
  data() {
    return {
      id: "",
      bannerCur: 0,
      bannerList: [],
      bottomModal: false,
      modalTitle: "",
      modalType: "promotion",
      selectType: "",
      goodsList: [],
      outTradeNo: "",
      data: {},
      openid: "",
    };
  },
  onLoad(o) {
    this.goodsList = _goods_data.goodsList();
    this.id = o.id;
    this.getData();
  },
  onReady() {
    _tool.setBarColor(true);
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 0,
    });
  },
  methods: {
    getData() {
      let params = {
        id: this.id,
      };
      this.$u.api
        .getGoodDetail(params)
        .then((res) => {
          this.data = res.data;
          let fileUrl = res.data.fileUrl.split(",");
          this.bannerList = [];
          fileUrl.map((item) => {
            this.bannerList.push({ url: item });
          });
        })
        .catch(() => {});
    },
    WxPay(type) {
      console.log("获取订单编号-----------");
      uni.showLoading({
        title: '获取订单编号'
      });
      this.$u.api
        .generateUuid()
        .then((res) => {
          console.log(res);
          this.outTradeNo = res.data;
          uni.hideLoading();
          this.createOrder(type);
        })
        .catch(() => {});
    },
    createOrder(type) {
      this.openid = uni.getStorageSync("openid");
      let data = {
        outTradeNo: this.outTradeNo,
        commodityList: [this.data],
        wxOpenId: this.openid,
        type: type,
      };
      uni.showLoading({
        title: '下单中'
      });
      console.log("下单-----------");
      this.$u.api
        .createOrder(data)
        .then((res) => {
          console.log(res);
          uni.hideLoading();
          let resData = res.data;
          uni.requestPayment({
            provider: "wxpay",
            appid: "wx34a18e49e3f60ae0", // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
            nonceStr: resData.nonceStr, // 随机字符串
            signType: resData.signType,
            package: resData.packageVal, // 固定值
            partnerid: "1684199705", // 微信支付商户号
            prepayid: this.outTradeNo, // 统一下单订单号
            timeStamp: resData.timeStamp, // 时间戳（单位：秒）
            paySign: resData.paySign, // 签名，这里用的 MD5/RSA 签名
            success: (res) => {
              this.$u.func.route("/pages/order/list");
            },
            fail(e) {
              console.log("requestPayment------", e);
            },
          });
        })
        .catch(() => {});
    },
    bannerSwiper(e) {
      this.bannerCur = e.detail.current;
    },
    serviceTap() {
      this.modalTitle = "服务";
      this.modalType = "service";
      this.showModal();
    },
    promotionTap() {
      this.modalTitle = "促销优惠";
      this.modalType = "promotion";
      this.showModal();
    },
    selectTap(type) {
      this.selectType = type;
      this.modalTitle = "选择规格";
      this.modalType = "select";
      this.showModal();
    },
    showModal() {
      this.bottomModal = true;
    },
    hideModal(e) {
      this.bottomModal = false;
      this.modalTitle = "";
      this.modalType = "";
    },
    myCartTap() {
      uni.navigateTo({
        url: "/pages/goods/my_cart",
      });
    },
  },
};
</script>

<style lang="scss">
/* #ifdef APP-PLUS */
@import "../../static/colorui/main.css";
@import "../../static/colorui/icon.css";
@import "../../static/zaiui/style/app.scss";
/* #endif */
@import "../../static/zaiui/style/goods.scss";
.creen-swiper {
  width: 100%;
  height: 800rpx;
  image {
    width: 100%;
    height: 100%;
  }
}
.head {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  background: #55a2f9;

  .set-icon {
    vertical-align: middle;
    width: 41rpx;
    height: auto;
    margin-right: 35rpx;
  }

  .head-bg {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
    width: 750rpx;
    height: 582rpx;
    background: #55a2f9;
  }
}
</style>
